<template>
  <div class="container">
      <p class="head">汉服后台管理系统</p>
      <div class="main">
          <p class="p4">注册</p>
          <el-form >
   <el-form-item label="账号">
    <el-input v-model="adm.username"  @blur="yz"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="adm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">注册</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<p class="tozc" @click="dl">注册成功?点击-->去登录</p>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            adm:{
                username:"",
                password:""

            }
        }
    },
    methods:{
        submitForm(){
            axios.post('/stores/register',this.adm).then(({data}) => {
                console.log(data)
                alert("注册成功")
        })
        },
        dl(){
         this.$router.push('/login');
    },
    yz(){
        axios.post('/stores/verify',{username:this.adm.username}).then(({data}) => {
                if(data){
                    alert("该账号已注册")
                }
                
        })
    }
    },
    
    
}
</script>

<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.container{
    width: 100%;
    height: 100%;
    background: #306A95;  /* fallback for old browsers */
overflow: hidden;
}
.main{
    height: 350px;
    width: 400px;
    background: white;
    position: absolute;
    left: 48rem;
    top:20rem;

 margin-left:-200px;
/*设置为宽度的一半*/
    margin-top:-150px;

}
.head{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-top:50px;
 

}
.p4{
    text-align: center;
    font-weight: bold;
    display: block;
    margin-bottom: 50px;
    margin-top: 20px;
}
.el-input{
    width: 250px;
}
.el-form-item {
    margin-left: 45px;
}
.el-button{
    margin-left: 90px;
}
.tozc{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 15px;
    color: red;
    cursor: pointer;
}
.tu1{
    position: absolute;
    left: 20%;
    top:20%
}
.tu1 img{
    width: 300px;
    height: 400px;
}
</style>